<script setup lang="ts">
import { useDebounceFn } from '@vueuse/core'
import { StudentApi } from '@/apis'

const emit = defineEmits(['select'])

const model = defineModel<string | number | Array<any>>()
const options = ref<any>()
const loading = ref(false)
const getOptionList = (keyword = undefined) => {
  loading.value = true
  StudentApi.getStudentPage({
    keyword,
    page: 1,
    size: 20,
    total: 1
  }).then((res) => {
    options.value = res.records
    // options.value = res.records.map(item => ({
    //   label: item.name,
    //   value: item.id,
    // }))
  }).finally(() => {
    loading.value = false
  })
}

const onSearch = useDebounceFn((value) => {
  getOptionList(value)
}, 100)

const onChange = (item) => {
  emit('select', item)
}

onMounted(() => {
  getOptionList()
})
</script>

<template>
  <a-select
    v-model="model"
    :loading="loading"
    placeholder="学生姓名/拼音/手机号关键词"
    allow-clear
    allow-search
    :filter-option="false"
    value-key="id"
    @search="onSearch"
    @change="onChange"
  >
    <a-option v-for="item in options" :key="item.id" :value="item.id">
      <div class="w-full flex-row-between-center">
        <span>{{ item.name }}</span>
        <div class="text-gray-4">
          ({{ item.parentPhone }})
        </div>
      </div>
      <!-- {{ item.name }} -->
      <!-- <CellClassInfo :id="item.id" :is-link="false" :name="item.name" :lead-teacher-name="item.leadTeacherName" :assist-teacher-name="item.assistTeacherName" /> -->
    </a-option>
  </a-select>
</template>

<style scoped>
:deep(.arco-select-option-content) {
  width: 100%;
}
</style>
